<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>选择游戏房间</title>
    <link rel="icon" type="image/png" href="./img/favicon.png">
    <!-- 引入Bootstrap CSS -->
    <link  href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="css/home-icon.css" type="text/css" rel="stylesheet"/>
    <link href="css/Toast.css" type="text/css" rel="stylesheet">
    <style>
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination button {
            margin: 0 5px;
        }

        /* 隐藏不匹配的房间卡片 */
        .hidden {
            display: none;
        }
    </style>
</head>
<body>


<div class="header">
    <a href="/">
        <img src="./img/icons8-home.png" class="home-icon" alt="返回首页">
    </a>
</div>
<div class="container">
    <h1 class="text-center mb-4">请选择游戏房间</h1>
    <!-- 搜索框 -->
    <div class=" mt-4 mb-4">
        <label for="searchInput" class=" form-label">请输入房间名或房间号</label>
        <div class="input-group">
            <input type="text"
                   class="form-control"
                   id="searchInput"
                   placeholder="输入房间名称进行搜索...">
            <button id="Search"
                    class="btn btn-primary"
                    type="button">
                <i class="bi bi-search me-1"></i>搜索
            </button>
        </div>
    </div>
    <div class=" d-flex align-items-end gap-3">
        <h4>公开房间</h4>
        <button type="button"
                class="btn btn-success"
                data-bs-toggle="modal"
                data-bs-target="#addRoomModal">
           添加房间
        </button>
    </div>
    <hr>
    <!-- 公开房间 -->
    <div class="row justify-content-center" id="otherRoomsContainer">

    </div>
</div>


<div class="pagination">
    <button id="prevPage" class="btn btn-outline-primary">上一个</button>
    <span id="pageInfo" class="mx-3 align-self-center"></span>
    <button id="nextPage" class="btn btn-outline-primary">下一个</button>
</div>


<!-- 添加房间模态框 -->
<div class="modal fade" id="addRoomModal" tabindex="-1" aria-labelledby="addRoomModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addRoomModalLabel">添加房间</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addRoomForm">
                    <div class="mb-3">
                        <label for="roomName" class="form-label">房间名称</label>
                        <input type="text" class="form-control" id="roomName" required>
                    </div>

                    <div class="mb-3">
                        <label for="roomType" class="form-label">房间类型</label>
                        <select class="form-select" id="roomType">
                            <option value="PUBLIC">公开房间</option>
                            <option value="PRIVATE">私密房间</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="roomPassword" class="form-label">房间密码</label>
                        <input type="password" class="form-control" id="roomPassword" placeholder="123456"/>
                        <div class="form-text">
                            如果房间类型为私密，则需要设置密码。默认密码为 123456
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="AddRoomSubmit" type="submit" form="addRoomForm" class="btn btn-primary"
                        data-bs-dismiss="modal">添加房间
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 房间密码输入弹框 -->
<div class="modal fade" id="inputModal" tabindex="-1" aria-labelledby="inputModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="inputModalLabel">请输入信息</h5>
            </div>
            <div class="modal-body">
                <form id="inputForm">
                    <div class="mb-3">
                        <label for="room-password" class="form-label">房间密码</label>
                        <input type="password" class="form-control" id="room-password" placeholder="请输入您的房间密码"
                               required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- Toast 提示 -->
<div class="toast-container">
    <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">提示</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body"></div>
    </div>
</div>

<!-- 引入Bootstrap JS和Bundle（包含Popper.js功能） -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/GameLobby/DataRendering.js" type="module"></script>
</body>
</html>



